.balloon {
  position: relative;
  width: 270px;
  padding: 11px;
  border-radius: 4px;
  background-color: #ffffff;
  z-index: 1;

  -webkit-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.5);

  transform: translateY(0px);

  &.white {
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
  }

  &.small {
    width: 200px;
  }

  &.unpadded {
    padding: 11px 0;
  }
}

// .triangle {
//   position: absolute;
//   background-color: #ffffff;
//   text-align: left;
//   display: inline-block;
//   top: -9px;
//   left: 50%;
//
//   transform: translateX(-5px) rotate(-60deg) skewX(-30deg) scale(1,.866);
//
//   &.right {
//     left: auto;
//     right: 100px;
//   }
//
//   &:before, &:after {
//     content: '';
//     position: absolute;
//     background-color: inherit;
//   }
//
//   &, &:before, &:after {
//     width:  10px;
//     height: 10px;
//     border-top-right-radius: 40%;
//   }
//
//   &:before {
//     transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
//   }
//
//   &:after {
//     transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
//   }
// }
